<template>
  <div class="home">
   <my-header>
      <template #center>
         用户登录
      </template>
      <template #right>
        <span class="right" @click="$store.commit('cutColor')">
          切换主题
        </span>
      </template>
   </my-header>
   <div class="login_count">
     <my-input v-model="login" @blur="phoneChange">
       <template #laber>
         <span>
           手机号码：
         </span>
       </template>
       <template #icon>
         <span :class="rephone==1?'success':'error'" v-if="rephone">{{rephone==1?'正确':'错误'}}</span>
       </template>
     </my-input>
     <my-input v-model="pwd" @blur="pwdChange">
       <template #laber>
         <span>
           密码：
         </span>
       </template>
       <template #icon>
         <span :class="repwd==1?'success':'error'" v-if="repwd">{{repwd==1?'正确':'错误'}}</span>
       </template>
     </my-input>
     <button :disabled="rephone!==1||repwd!==1" class="loginBtn" :style="{'background': (rephone!==1||repwd!==1)?'':$store.state.useColor}" @click="loginbtn">登录</button>
   </div>
  </div>
</template>

<script>
import MyHeader from '../components/myHeader.vue'
import MyInput from '../components/myInput.vue'
import { ref, reactive, toRefs} from 'vue';
import { useRouter } from 'vue-router';
export default {
  name: 'Home',
  components: {
    MyHeader,
    MyInput
  },
  setup(){
    const router = useRouter();
    const data = reactive({
      login: '',
      pwd: '',
      rephone: 0, // 0 代表没有触摸过，1 代表正确，2代表失败
      repwd: 0, // 0 代表没有触摸过，1 代表正确，2代表失败
    })
    const loginbtn = () => {
       if (data.login == '13666666666' && data.pwd == '123456'){
          router.push('/about');
       } else {
         alert('用户名或者密码错误');
       }
    }
    const phoneChange = () => { // 手机号的验证
       let rePhone = /^1[3-9][0-9]{9}$/; // 手机号的正则
       data.rephone = rePhone.test(data.login)? 1 : 2
    }
    const pwdChange = () => { // 密码的验证
      let rePwd = /^[a-z0-9]{6,18}$/;
      data.repwd = rePwd.test(data.pwd)? 1: 2
    }
    return {
      ...toRefs(data),
      loginbtn,
      phoneChange,
      pwdChange
    }
  }
}
</script>
<style lang="scss" scoped>
   .home{
     height: 100%;
   }
   .right{
     font-size: 12px;
     color: rgba(72, 72, 185, 0.897);
   }
   .login_count{
    margin: 100px auto;
   }
   .success{
     font-size: 12px;
     margin-left: 5px;
     color: green;
   }
   .error{
     font-size: 12px;
     margin-left: 5px;
     color: red;
   }
   .loginBtn{
     width: 100px;
     height: 30px;
     border:none;
     display: block;
     margin: 30px auto;
     border-radius: 8px;
     color: #ccc;
   }
</style>